<template>
  <!-- 医院科室 -->
  <div class="Re_depart">
    <header @click="Re_depart_header">
      <img class="Re_deppart_back" src="../../../static/imgs/return.png">
      <p>科室</p>
    </header>

    <main>
      <!-- 左侧科室分类 -->
      <section class="deppartLeft">
        <ul>
          <li :class='{active: isOpen == i}' @click='select(i)' v-for='f,i in zhu'>
            <p>{{f.name}}</p>
          </li>
        </ul>
      </section>
      <!-- 右侧科室列表 -->
      <section class="deppartRight">

        <div class="deppartItem" ref='inf' @click="$store.commit('add',x.infos)"  v-for='x,i in list1' v-show='isOpen == 0' >
          <router-link to='Register' tag='p'>{{x.infos}}</router-link>
        </div>
    
        <div class="deppartItem" @click="$store.commit('add',x.infos)" v-for='x,i in list2' v-show='isOpen == 1' >
          <router-link to='Register' tag='p'>{{x.infos}}</router-link>
        </div>

        <div class="deppartItem" @click="$store.commit('add',x.infos)" v-for='x,i in list3' v-show='isOpen == 2' >
          <router-link to='Register' tag='p'>{{x.infos}}</router-link>
        </div>

        <div class="deppartItem" @click="$store.commit('add',x.infos)" v-for='x,i in list4' v-show='isOpen == 3' >
          <router-link to='Register' tag='p'>{{x.infos}}</router-link>
        </div>
        <!-- @click='selstecd(x)' -->
      </section>
    </main>
  </div>
</template>

 

<script>
import store from '../../store/store.js'
import {mapState,mapMutations } from 'vuex'
  export default {
    name:'Re_depart',
    data:function(){
      return {
        list1:[],
        list2:[],
        list3:[],
        list4:[],
        isOpen:false,
        zhu:[
          {name:"其他"},
          {name:"妇儿"},
          {name:"外科"},
          {name:"内科"},
        ]
      }
    },
    methods:mapMutations([
        'add'
    ]),
    methods:{
      select(index){
        this.isOpen = index
      },
      // selstecd (info) {
      //     console.log(info)
      // },
      Re_depart_header:function(){
      	      this.$router.go(-1)
      }     
    
    },
     created () {
        this.$axios.get('http://127.0.0.1:9999/message').then(o=>{
                  this.list1 = o.data[0].qita;
                  this.list2 = o.data[1].fu;
                  this.list3 = o.data[2].wai;
                  this.list4 = o.data[3].nei;
        })
    },
    store
  }
</script>
<style scoped lang='less'>

.px2rem(@name, @px){
@{name}: @px / 75 * 1rem;
}
.Flex{
    display:flex;
}
.line-height(@arg){.px2rem(line-height, @arg);}
.font-size(@arg){.px2rem(font-size, @arg);}
.font(@fz,@color){
    .px2rem(font-size,@fz);
    color: @color;
}
.border-bottom(@px,@xian,@color){
    .px2rem(border-bottom-width,@px);
    border-bottom-style: @xian;
    border-bottom-color: @color;
}
.border-top(@px,@xian,@color){
    .px2rem(border-top-width,@px);
    border-top-style: @xian;
    border-top-color: @color;
}
.border(@px,@xian,@color){.px2rem(border-width,@px);border-style: @xian; border-color: @color;}
.padding-top(@top){.px2rem(padding-top, @top);}
.padding-right(@right){.px2rem(padding-right, @right);}
.padding-bottom(@bottom){.px2rem(padding-bottom, @bottom);}
.padding-left(@left){.px2rem(padding-left, @left);}
.padding(@top,@right,@bottom,@left){
   .px2rem(padding-top,@top);
   .px2rem(padding-bottom,@bottom);
   .px2rem(padding-right,@right);
   .px2rem(padding-left,@left);
}
.margin-top(@top){.px2rem(margin-top, @top);}
.margin-right(@right){.px2rem(margin-right, @right);}
.margin-bottom(@bottom){.px2rem(margin-bottom, @bottom);}
.margin-left(@left){.px2rem(margin-left, @left);}
.margin(@top,@right,@bottom,@left){
   .px2rem(margin-top,@top);
   .px2rem(margin-right,@right);
   .px2rem(margin-bottom,@bottom);
   .px2rem(margin-left,@left);
}

header{
    background: url(../../../static/imgs/Reg_serve_bg01.jpg);
    .px2rem(height,88);
    .px2rem(font-size,40);
    .Flex;
    position: fixed;
    width:100%;
    padding-left:2%;
    align-items:center;
      p{
        margin-left: 5%;
      }
      img{
        .px2rem(width,55);
        .px2rem(height,53);
      }
}
html,body{
   /*width:100%;
   height:100%;*/
   
}
main{
  .Flex;
  height:100%;
  .padding-top(88);
  .font-size(30);
  .deppartLeft{
    width:30%; 
    li{
      border-bottom: 1px solid #ccc;
      background:#f0f2f5;
      .padding(20,0,20,20);
      &.active{
        background:#ffffff;
      }
    }
  }
  .deppartRight{
    width:70%;
    background:#ffffff;
    height:100%;
    .deppartItem{
      .padding(20,0,20,20);
      border-bottom: 1px solid #ccc;
    }
  }
}
</style>
